<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        table{
            width: 100%;
            margin-bottom: 15px;
            border-collapse: collapse;
            table-layout: fixed;
        }
        th,td{
            border: 1px solid #CBD6DE;
            padding-left: 10px;
            line-height: 28px;
        }
        th{
            text-align: left;
            background: linear-gradient(#edf2f5,#dce9f2,#edf2f5);
            color:#467aa7;
        }
        tbody tr:nth-child(even){
            background: #f2f2f2;
        }
        #pages{
            text-align: center;
            padding-top: 8px;
        }
        .page{
            min-width: 50px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="app">
<div id="wrap">
    <div id="header">
        <div style="float: right;padding-top: 24px">
            2009/11/20&emsp;
            <a href="../login.html" style="color:#fff;float: right">安全退出</a>
        </div>
        <h1>旅游信息管理系统</h1>
    </div>
    <div id="header-bar"></div>
    <div id="content" style="height: 360px">
        <h2>省份列表</h2>
        <table>
            <thead>
            <tr>
                <th width="15%">ID</th>
                <th width="20%">省份</th>
                <th width="25%">标签</th>
                <th width="15%">景点个数</th>
                <th width="25%">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="province in provinces">
                <td v-text="province.id">1</td>
                <td v-text="province.name">北京市</td>
                <td v-text="province.tags" >首都、天安门</td>
                <td v-text="province.placecounts">20</td>
                <td>
                    <a href="javascript:;" @click="deleteProvince(province.id)" >删除省份</a>
                    <a href="../viewspot/viewspotlist.html">景点列表</a>
                    <a :href="'./updateprovince.html?id='+province.id">修改省份</a>
                </td>
            </tr>
            </tbody>
        </table>
        <a href="addprovince.html">
            <button type="button">添加省份</button>
        </a>
        <div id="pages">
            <a href="javascript:;" @click="findAll(page-1)" v-if="page>1" class="page">&lt;上一页</a>
            <a href="javascript:;" class="page" v-for="currPage in totalPage"  @click="findAll(currPage)" >{{currPage}}</a>
            <a href="javascript:;" @click="findAll(page+1)" v-if="page<totalPage" class="page">&lt;下一页</a>
        </div>
    </div>
    <div id="footer">
        ABC@126.com
    </div>
</div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>

    const app = new Vue({
        el:"#app",
        data:{
            provinces:[],
            page:1,
            rows:4,
            totalPage:0,
            totals:0
            /*lastPage:"http://localhost:8989/travels/province/findByPage?"+*/
        },
        methods:{
            findAll:function (currPage) {//查询所有
                if (currPage){
                    this.page = currPage;
                }
                _this = this;
                axios.get("http://localhost:8989/travels/province/findByPage?page="+this.page)
                    .then(function (respoinse) {
                        _this.provinces = respoinse.data.provinces;
                        _this.page = respoinse.data.page;
                        _this.totalPage = respoinse.data.totalPage;
                        _this.totals = respoinse.data.totals;
                    });
            },
            deleteProvince:function (id) {
                axios.get("http://localhost:8989/travels/province/delete?id="+id)
                    .then(function (respoinse) {
                        console.log(respoinse.data);
                       if (respoinse.data.state){
                           alert(respoinse.data.msg+",点击确定刷新页面");
                           location.reload(true);//刷新当前页面
                       }else {
                           alert(respoinse.data.msg);
                       }
                    });
            }
        },
        created:function () {
            this.findAll();
        }
    })

</script>
